{extend name="common:base" /}

{block name="title"}添加货物 - 天佑二手货{/block}
{block name="page"}goods{/block}

{block name="css"}
<link rel="stylesheet" type="text/css" href="__STATIC__/css/simditor.css">
<link rel="stylesheet" type="text/css" href="__STATIC__/css/goods.css">
<link rel="stylesheet" href="__STATIC__/css/cropper.min.css" />
{/block}

{block name="main"}
<div class="am-g am-g-fixed am-margin-top">
    <div class="am-u-sm-10 am-u-sm-centered">
        <h2>添加货物</h2>
        <hr>
        <form class="am-form">
            <div class="am-g am-g-collapse" id="nature">
                <select name="area" data-am-selected="{btnWidth: '6em', btnSize: 'sm'}" name="area">
                    <option value="1" selected>南岸校区</option>
                    <option value="2">双福校区</option>
                </select>
                <select name="type" data-am-selected="{btnWidth: '4em', btnSize: 'sm'}" name="type">
                    <option value="1" selected>出售</option>
                    <option value="2">租赁</option>
                </select>
                <select class="category" data-am-selected="{btnWidth: '6em', btnSize: 'sm'}" data-pid="0" name="cate_id">
                    <option value="">--选择分类--</option>
                    {volist name="first" id="vo"}
                        <option value="{$vo.id}">{$vo.title}</option>
                    {/volist}  
                </select>
            </div>
            <div class="am-g am-g-collapse am-margin-top">
                <div class="am-u-sm-8">
                    <label for="title">货物名称:</label>
                    <input class="am-input-sm" type="text" name="title" id="title" value="" placeholder="如：旧手机一台；计算机网络教科书若干；">
                    <small>请您一次只添加一件物品，系统会为用户推荐您其他正在出售的货物</small>
                </div>
            </div>
            <div class="am-form-group am-margin-top">
                <textarea id="editor" placeholder="补充说明点什么" name="description"></textarea>
            </div>
            <div class="am-g am-g-collapse croped-container"></div>
            <div class="croppic-container" id="cropContaineroutput"></div>
            <button class="am-btn am-btn-sm am-btn-primary" id="cropButton" data-am-modal="{target: '#image-popup'}">添加展示图片</button>
            <input class="am-hide" name="photo"></input>
            <div class="am-cf am-g-collapse am-margin-top">
                <div class="am-u-sm-4">
                    <label class="">标价</label>
                    <div class="am-form-group am-form-primary am-form-icon">
                        <i class="am-icon-cny am-padding-left-xs"></i>
                        <input type="text" name="price" class="am-form-field am-input-primary" placeholder="998">
                    </div>
                </div>
                <div class="am-u-sm-7 am-u-offset-1">
                    <label class="">砍价 <small>小砍怡情 大砍伤身</small></label>
                    <div class="am-form-group">
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="0" checked data-am-ucheck> 不二价
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="1" data-am-ucheck> 可小刀
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="bargain" value="2" data-am-ucheck> 随便砍
                        </label>
                    </div>
                </div>
            </div>
            <label class="am-margin-top">上架期限</label>
            <div class="am-cf am-g-collapse">
                <div class="am-form-group" id="deadline-inline">
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="7" data-am-ucheck> 一周
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="30" data-am-ucheck> 一个月
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="90" data-am-ucheck checked> 三个月
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" name="deadline" value="180" data-am-ucheck> 六个月
                    </label>
                    <label class="am-radio-inline">
                        <input id="deadline-radio" type="radio" name="deadline" data-am-ucheck> 其他
                    </label>
                    <label class="am-radio-inline am-padding-0">
                        <input class="am-input-sm" id="deadline-other" style="display: none;" type="text" placeholder="单位: 天">
                    </label>
                </div>
            </div>
        </form>
        <div class="am-cf am-margin-top">
            <button id="form-submit" class="am-btn am-btn-primary">生成二手货</button>
        </div>
    </div>
</div>

<div class="am-modal am-modal-prompt" tabindex="-1" id="image-popup">
    <div class="am-modal-dialog">
        <div class="am-modal-hd">
            <sapn class="am-popup-title">添加展示图片</sapn>
            <span data-am-modal-close class="am-close">&times;</span>
        </div>
        <div class="am-u-sm-12">
            <span>图片格式必须为：bmp, jpeg, jpg, jpeg; 不可大于2M</span>
            <div class="am-form-group am-form-file">
                <button type="button" class="am-btn am-btn-default am-btn-sm">
                    <i class="am-icon-cloud-upload"></i> 添加展示图片</button>
                <input type="file" accept=".image,.gif,.jpg,.bmp" name="photofile" id="photofile" />
            </div>
            <div class="am-fl" id="box" style="width:200px;height:200px;">
                <img src="" id="srcimage" style="max-width:100%;">
            </div>
            <div class="am-fl" style="width:180px;height:180px;margin-left:25px;padding:0px;overflow:hidden;" id="newcro">
            </div>
        </div>
        <div class="am-modal-footer">
            <span class="am-modal-btn" data-am-modal-cancel>取消</span>
            <span class="am-modal-btn" id="btn-modify-image" data-am-modal-confirm>添加</span>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="__STATIC__/js/simditor-all.min.js"></script>
<script type="text/javascript" src="__STATIC__/js/cropper.min.js"></script>
<script type="text/javascript">
// 所有分类
var cate =  '{$category}';
cate = JSON.parse(cate);
// simditor 富文本编辑器
var editor = new Simditor({
    textarea: $('#editor'),
    toolbar: ['title', 'bold', 'italic', 'underline', '|', 'ol', 'ul', 'blockquote', 'table', '|', 'link', 'hr'],
});

// deadline 输入框控制
$('#deadline-inline > label:not(:last)').on('click', function(event) {
    $('#deadline-other').hide().attr('name', '');
});
$('#deadline-radio').parent('label').on('click', function(event) {
    $('#deadline-other').show().attr('name', 'deadline');
});
//cropper配置
var cropperOptions = {
    aspectRatio: 4 / 3,//裁剪后图片比例
    background: 0,
    zoomable: 0,
    preview: '#newcro',
    crop: function(data) {}
};
var $image = $('#srcimage');
$image.cropper(cropperOptions);
//加载本地图片
$('#photofile').on('change', function() {
    var file = this.files[0];
    var url;
    url = URL.createObjectURL(file);
    $('#srcimage').attr('src', url);
    $image.cropper("replace", url);
});

// 存储图片列表，用于保存至表单
var piclist = [];
$('#btn-modify-image').on('click', function() {
    var data = $image.cropper('getCroppedCanvas'/*, {
        'width': 300,
        'height': 300
    }*/).toDataURL();
    $.post("{:url('api/upload/imagetmp')}", {
        "photo": data
    }, function(returndata) {
        if (returndata.code == 0) {
            piclist.push(returndata.path);
            //location.reload();
            var imgname = returndata.path;
            var html = '<div class="am-u-sm-3 am-u-end croped-box">\
                        <a class="cropimg" href="' + imgname + '" target="_blank" title="' + imgname + '">\
                            <div style="background-image: url(' + imgname + ');"></div>\
                        <a>\
                        <a class="cropclose" onclick="removeCropBox(this)" data-uri="' + imgname + '" href="javascript:;">\
                            <i class="am-icon-btn am-danger am-icon-sm am-icon-close"></i>\
                        </a>\
                    </div>';
            $('.croped-container').append(html);
        } else {
            $alert = $('#am-alert');
            $alert.find('.content').text(returndata.msg);
            $alert.modal('open');
        }
    });
});

// 修复点击添加图片时会提交表单
$('.am-form').on('submit', function(event) {
    event.preventDefault();
});
// 移除展示图片
function removeCropBox(el) {
    var uri = $(el).attr('data-uri');
    var index = $.inArray(uri, piclist);
    if (index >= 0) piclist.splice(index, 1);
    $(el).parent('.croped-box').remove();
    $.post('{:url("api/croppic/removepic")}', {
        uri: uri
    }, function(data) {
        // 控制台显示远程移除结果
        console.log(data.msg);
    });
}

// 提交表单
$.fn.stringify = function() {
    // 数组转化为json
    return JSON.stringify(this);
}
$('#form-submit').on('click', function() {
    $('input[name="photo"]').val($(piclist).stringify());
    $.post("{:url('goods/addGoods')}", $('.am-form').serialize(), function(data) {
        $alert = $('#am-alert');
        $alert.find('.content').text(data.msg);
        $alert.modal('open');
        if (data.code) {
            setTimeout(function() {
                location.href = data.url;
            }, data.wait * 1000);
        }
    });
});

$(document).on('change','.category',function(){
    var select = $(this).val();
    var children = [];
    var str = '<select data-pid="' + select + '" class="category" name="cate_id" data-am-selected="{btnWidth: \'6em\', btnSize: \'sm\'}" name="cate_id">';
    str += '<option value="">--选择分类--</option>}';
    // 构造下一级菜单的下拉框
    for(var k = 0; k < cate.length;k++){
        if (select == cate[k]['pid']) {
            str += '<option value="' + cate[k]['id']+ '">'+ cate[k]['title'] +'</option>';
            children.push(cate[k]);
        }
    }
    str += '</select>';
    // 选取一级菜单以下的菜单下拉框
    var category = $('.category');
    console.log('后缀菜单' + category.length);
    var is_delete = 0;
    // 循环删除此次操作下拉框后面的下拉框
    for (var j = 0; j < category.length; j++) {
        if($(this).data('pid') == $(category[j]).data('pid')){
            console.log(this);
            is_delete = 1;
            continue ;
        }
        if (is_delete == 1) {
            console.log(category[j]);
            // 使用amazeui的对象销毁方法，因为amazeui还在select后面添加了一个div对象
            $(category[j]).selected('destroy');
            $(category[j]).remove();
        }
    };
    if (children.length > 0) {
        $('#nature').append(str);
         $('.category:last').selected({
            btnWidth: '6em',
            btnSize: 'sm'
          });
    }
});

</script>
{/block}
